<template>
    <view class="page">
        
        <view class="g-product-list">
            <view class="g-product" v-for="(item,index) in data" :key="index" v-if="isGoodsTpye">
                <navigator open-type="navigate" class="g-product-pic" :url="'/pages/user/group_order?team_id='+item.team_id">
                    <image :src="item.thumb" mode="widthFix"></image>
                </navigator>
                <view class="g-product-info">
                    <navigator open-type="navigate" class="u-info-name f-two-ellipsis" :url="'/pages/user/group_order?team_id='+item.team_id"><text class="u-order">第{{item.no}}期</text>{{item.goods_name}}</navigator>
                    <view class="g-countdown">
                        <text>距结束</text>
                        <view><uni-countdown fontColor="#FFFFFF" bgrColor="#000000" :timer="item.end_time"></uni-countdown></view>
                    </view>
                    <view class="g-price">￥<text>{{item.shop_price}}</text></view>
                    <view class="small-text">已拼{{item.has_buy_num}}份&nbsp;&nbsp;剩余{{item.sy_buy_num}}份</view>
                </view>
                <button class="u-product-buy" @tap="openPopup" :data-index="index">加拼</button>
                <image class="u-product-sign" :src="item.promotion_id == 1 ? '../../static/icons/ydt/product8.png' : '../../static/icons/ydt/product_free.png'" mode="widthFix"></image>
            </view>
			<view class="g-product" v-for="(item,index) in data" :key="index" v-if="!isGoodsTpye">
			    <navigator open-type="navigate" class="g-product-pic" url="#">
			        <image :src="item.thumb" mode="widthFix"></image>
			    </navigator>
			    <view class="g-product-info">
			        <navigator open-type="navigate" class="u-info-name f-two-ellipsis" url="#">{{item.goods_name}}</navigator>
			        <view class="g-price">￥<text>{{item.shop_price}}</text></view>
			        <view class="small-text">已购买{{item.num}}份&nbsp;&nbsp;共¥{{item.total_money}}</view>
					<view class="time" style="color: #828080;">{{item.time}}</view>
			    </view>
			    <button class="u-product-buy" :data-index="index">{{item.status}}</button>
			</view>
            <view class="m-b-loading" v-if="showLoading2">
            	<image src="../../static/images/loading2.gif" mode="widthFix"></image>
                <text>加载中</text>
            </view>
        </view>
        <!-- 弹框蒙版 -->
        <view class="u-popup-mask" v-if="bPopup"></view>
        <view class="g-popup" v-if="bPopup">
            <view class="u-popup-title">选择份数</view>
            <view class="g-number-select">
                <button class="u-mins" @tap="setNumber" data-type="mins">
                    <image src="../../static/icons/mins.png" mode="widthFix"></image>
                </button>
                <input type="number" v-model="nNumber" @change="checkNumber">
                <button class="u-plus" @tap="setNumber" data-type="plus" >
                    <image src="../../static/icons/plus.png" mode="widthFix"></image>
                </button>
            </view>
			<button class="u-popup-buy" @tap="toPay">立即支付</button>
            <view class="u-popup-close" @tap="closePopup">
                <close size="50" color="#847c7c"></close>
            </view>
        </view>
        <!-- 搜索框 -->
        <view class="g-search-box" :style="{transform:  bIsShowSearch? 'translateX(0)': 'translateX(100%)'}">
            <view class="u-search-close" @tap="toggleSearch">
                <close size="50" color="#fff"></close>
            </view>
            <input type="text" placeholder="请输入要搜索的商品名字" v-model="sendData.goods_name">
            <view class="u-search-btn" @tap="fSearch">搜索</view>
        </view>
        <view class="m-full-loading" v-if="showLoading">
        	<image src="../../static/images/loading.gif" mode="widthFix"></image>
        </view>
        <view class="m-no-data" v-if="showNodata">
        	<image src="../../static/images/no_order.png" mode="widthFix"></image>
        </view>
        
    </view>
</template>
<script>
    import uniCountdown from '@/components/uni-countdown.vue';
    import henglang from '@/common/common.js';
    export default {
        data() {
            return {
                nNumber: 1,
                bPopup: false,
                nMaxNum: 5,
                bIsShowSearch: false,
                data: [] ,// 数据
                sendData: { // 发送的数据
                    goods_name: '',
                    page: 1,
                },
                showLoading: true, // loading 图
                showLoading2: false,
                showNodata: false,
                productIndex: 0, // 商品索引
				totalPages:1,
				isGoodsTpye: henglang.isGoodsTpye()
            };  
        },
		components: {
			uniCountdown
		},
        methods: {
            fSearch() { // 搜索
                if (!this.sendData.goods_name) {
                    fShowToast('请输入搜索关键词');
                    return;
                }
                this.sendData.page = 1;
                this.request();
                this.toggleSearch();
            },
            openPopup(e) { 
				let that = this
				that.bPopup = !that.bPopup;
				that.productIndex = e.currentTarget.dataset.index;
				that.nNumber = that.data[that.productIndex].sy_buy_num;
            },
			closePopup() {
				this.bPopup = !this.bPopup;
			},
            toPay(e) { 
                let {goods_id,promotion_id} = this.data[this.productIndex];
               
                uni.navigateTo({url: `/pages/order/payment?goods_id=${goods_id}&promotion_id=${promotion_id}&num=${this.nNumber}`})
            },
            toggleSearch() {
                this.bIsShowSearch = !this.bIsShowSearch;
            },
            setNumber(e) { // 数量加减
                let type = e.currentTarget.dataset.type;
                if (type === 'mins') { // 减
                    if (this.nNumber <= 1) {
                        uni.showToast({
                            icon: 'none',
                            title: '最低购买份数1',
                        })
                        return;
                    }
                    this.nNumber = --this.nNumber;
                } else if (type === 'plus') { // 加
                    if (this.nNumber >= this.data[this.productIndex].sy_buy_num) {
                        uni.showToast({
                            icon: 'none',
                            title: '最大购买份数' + this.data[this.productIndex].sy_buy_num,
                        })
                        return;
                    }
                    this.nNumber = ++this.nNumber;
                }
            },
            checkNumber() { // 校检input数量
                if (this.nNumber < 1) {
                    this.nNumber = 1;
                    uni.showToast({
                        icon: 'none',
                        title: '最低购买份数1',
                    })
                }
                if (this.nNumber >= this.data[this.productIndex].sy_buy_num) {
                    this.nNumber = this.data[this.productIndex].sy_buy_num;
                    uni.showToast({
                        icon: 'none',
                        title: '最大购买份数' + this.data[this.productIndex].sy_buy_num,
                    })
                }
                this.nNumber = Math.floor(this.nNumber);
            },
            back() {
                uni.navigateTo({
                	url:'/pages/user/user_index'
                })
            },
            request(type) { // 请求数据
				let that = this;
                this.showLoading2 = true;
				if(!henglang.checkLogin()){
					this.showLoading = this.showLoading2 = false;
                	this.showNodata = true;
                	return false;
                }
				let url = '';
				let data = {};
				if(that.isGoodsTpye){
					url = 'order/getTeamLoading'
					data = that.sendData
				}else{
					url = 'order/demiorder'
					data = {type:1}
				}
				if(that.sendData.page <= that.totalPages){
					henglang.get(url,data,true,function(res){
						that.showLoading = false;
						that.showLoading2 = false;
						if (!res.data.data.length) {
							that.showNodata = true;
							return false;
						}
						if (type=='plus') {
							that.data = that.data.concat(res.data.data);
						} else {
						    that.data = res.data.data;
							that.totalPages = res.data.total_pages;
						}
					});
				}else{
					that.showLoading2 = false;
				};
            }
        },
        onReady() {
            this.request();
        },
        onReachBottom() {
			this.sendData.page += 1;
			this.showLoading2 = true;
            this.request('plus');
        },
		onBackPress(options) {  
		    if (options.from === 'navigateBack') {  
		        return false;  
		    }  
		    this.back();  
		    return true;  
			
		}
        
    }
</script>

<style>

    /* 倒计时 */
    .g-countdown {
        margin-top: 10upx;
        display: flex;
    }
    .g-countdown text:first-child {
        margin-right: 5px;
    }
    .g-countdown .u-time {
        color: #fff;
        background: #2c2c2c;
        border-radius: 2px;
        padding: 0 5px;
    }
    
    /* 搜索框 */
    .g-search-box {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 12;
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        background: #d71311;
        padding: 0 5px;
        box-sizing: border-box;
        transition: .3s;
    }
    .u-search-btn {
        background: #fff;
        border-radius: 4px;
        color: #D71511;
        width: 44px;
        text-align: center;
        height: 35px;
        line-height: 35px;
    }
    .g-search-box input {
        flex: 1; 
        height: 35px;
        border-radius: 4px;
        background: #fff;
        margin: 0 20px;
        box-sizing: border-box;
        padding-left: 10px;
        line-height: 35px;
    }
    /* 产品 */
    .g-product-list {
        padding: 10px;
    }

    .g-product {
        border-radius: 3px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        margin-bottom: 10px;
        display: flex;
        padding: 10px;
        position: relative;
    }

    .g-product-pic {
        width: 240upx;
        height: 240upx;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }
	.g-product-pic image{
		width: 240upx;
		height: 240upx;
		overflow: hidden;
	}
    .g-product-info {
        flex: 1;
    }
	.g-product-info .u-info-name {
		height: 82upx;
		line-height: 41upx;
	}
	.g-product-info .u-info-name .u-order{
	    font-size: 24upx;
	    color: #D71511;
	    border: 1px solid #D71511;
	    border-radius: 2px;
	    padding: 0 2px;
		margin-right: 10upx;
	}
    .g-price {
        font-size: 24upx;
        color: #d71311;
        margin-bottom: 10upx;
    }

    .g-price text {
        font-size: 40upx;
    }

    .small-text {
        color: #828080;
    }
	

    .u-product-buy {
        background: #d71511;
        color: #fff;
        border-radius: 8upx;
        padding: 4upx 14upx;
        position: absolute;
        right: 20upx;
        bottom: 34upx;
        font-size: 32upx;
        box-shadow: 0 0 10px rgba(215, 21, 17, .5);
    }

    .u-product-sign {
        width: 75rpx;
		height: 75rpx;
		overflow: hidden;
        position: absolute;
        top: 5px;
        left: 5px;
    }

    /* 弹框 */
    .u-popup-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .5);
        z-index: 9;
    }

    .g-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        border-radius: 5px;
        background: #fff;
        text-align: center;
        width: 80%;
    }

    .u-popup-title {
        padding: 15px 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        font-size: 32upx;
    }

    .u-popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .g-number-select {
        width: 70%;
        display: flex;
        height: 84upx;
        line-height: 84upx;
        text-align: center;
        margin: 60upx auto;
    }

    .g-number-select image {
        width: 40upx;
        height: 40upx;
    }

    .u-mins {
        width: 100%;
        border: 1px solid #a4a4a4;
        border-radius: 5px 0 0 5px;
        background: #d2d2d2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .g-number-select input {
        border-top: 1px solid #A4A4A4;
        border-bottom: 1px solid #A4A4A4;
        height: 96%; 
    }

    .u-plus {
        width: 100%;
        background: #d71311;
        border-radius: 0 5px 5px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .g-buy-number {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
	
    .u-popup-buy {
        color: #fff;
        background: #d71311;
        border-radius: 4px;
        width: 40%;
        padding: 10px 0;
		margin: 60upx auto;
        box-shadow: 0 7px 13px -2px rgba(255,0,0,.5);
    }
</style>
